<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2016/3/8
  Time: 13:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<html>
<head>
<title>用户管理</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="format-detection" content="telephone=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport"
	content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

<link href="${pageContext.request.contextPath}/static/css/KeysManager/User.css?date=102222" rel="stylesheet">
<link href="${pageContext.request.contextPath}/static/css/KeysManager/switch.css?date=1" rel="stylesheet">
<link href="${pageContext.request.contextPath}/static/css/KeysManager/font-awesome.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/static/plugins/layer_mobile/need/layer.css" rel="stylesheet">
 <link rel="stylesheet" href="${pageContext.request.contextPath}/static/plugins/dropload-gh-pages/dropload.css">
 <script src="${pageContext.request.contextPath}/static/js/jquery-1.11.3.min.js"></script>
 
    <script src="${pageContext.request.contextPath}/static/js/KeysManager/index.js?sate=3"></script>
    <%-- <script src="${pageContext.request.contextPath}/static/plugins/dropload-gh-pages/jquery.min.js"></script> --%>
    <script src="${pageContext.request.contextPath}/static/plugins/layer_mobile/layer.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/static/js/jquery.form.js" ></script>
	<%-- <script src="${pageContext.request.contextPath}/static/plugins/dropload-gh-pages/dropload.min.js?date=11"></script> --%>
	<script src="${pageContext.request.contextPath}/static/js/KeysManager/User.js?date=1"></script>
	
	<style type="text/css">
	.displaynone{
		display: none;
	
	}
	
</style>
</head>
<body>
<div class="mask"></div>
<div class="refer_list_main"> 
	<ul class="clearfix">
		<li class="refer_all1" data-type='1'>
			<div class="lf">全部</div>
			<div class="rt" >
				<img style="display: none;" src="${pageContext.request.contextPath}/static/images/KeysManager/ok.png">
				<%--<i class="fa fa-check"></i>--%>
			</div>
		</li>
		<li data-type='3'>
			<div class="lf" >钥匙到期时间最短</div>
			<div class="rt">
				<img style="display: none;" src="${pageContext.request.contextPath}/static/images/KeysManager/ok.png">
				<%--<i class="fa fa-check"></i>--%>
			</div>
		</li>
		<li  data-type='2'>
			<div class="lf">钥匙到期时间最长</div>
			<div class="rt">
				<img style="display: none;" src="${pageContext.request.contextPath}/static/images/KeysManager/ok.png">
				<%--<i class="fa fa-check"></i>--%>
			</div>
		</li>
		
	</ul>
</div>
<div class="list-head">
	<ul class="clearfix">
		<li>
			<div class="refer_list  refer_all check_style">
				全部
				<i class="fa fa-caret-down"></i>
			</div>
		</li>
		<li></li>
		<li>
			<div style="position: relative;" class="postpone">
				审核延期
				<span class="little_hot" id='little_hot' style="display: none;"></span>
			</div>
			
		</li>
	</ul>
</div>
 <div id="list" class="filtrate" >
<!-- 	<div class="listDetail" >
		 <div class="invalid">
			<div class="top-box clearfix">
				<div class="lf">王芳芳</div>
				<div class="rt">12345678900</div>
			</div>
			<div class="bottom-box clearfix">
				<div class="lf">登新公寓</div>
				<div class="rt">2017-06-05</div>
			</div>
		</div>
		<div class="invalbtn">
			<div class="big_btn green_bg">
				<div class="little_btn rt_site"></div>
			</div>
			<div class="btn_txt">是否启用</div>
		
		</div>
	</div>
	
	
 	<div class="listDetail">
		<div class="invalid">
			<div class="top-box clearfix">
				<div class="lf">王芳芳</div>
				<div class="rt">12345678900</div>
			</div>
			<div class="bottom-box clearfix">
				<div class="lf">登新公寓</div>
				<div class="rt">2017-06-05</div>
			</div>
		</div>
		<div class="invalbtn">
			<div class="big_btn">
				<div class="little_btn"></div>
			</div>
			<div class="btn_txt">是否启用</div>
		</div>
	</div>  -->
	
</div>
<div class="filtrate"></div>
<div class="filtrate"  style="display:none;margin-top: 4px;" id="list2" >
<%-- 	<div class="listDetail">
		<div class="invalid">
			<div class="top-box clearfix">
				<div class="lf">王芳芳</div>
				<div class="rt">12345678900</div>
			</div>
			<div class="bottom-box clearfix">
				<div class="lf">登新公寓</div>
				<div class="rt">2017-06-05</div>
			</div>
		</div>
		<div class="inval_apply">
			<div class="apply_pic"><img src="${pageContext.request.contextPath}/static/images/KeysManager/fillout.png"></div>
			<div>申请钥匙延期</div>
			
		</div>
	</div>
	
	<div class="listDetail">
		<div class="invalid">
			<div class="top-box clearfix">
				<div class="lf">王芳芳</div>
				<div class="rt">12345678900</div>
			</div>
			<div class="bottom-box clearfix">
				<div class="lf">登新公寓</div>
				<div class="rt">2017-06-05</div>
			</div>
		</div>
		<div class="inval_apply">
			<div class="apply_pic"><img src="${pageContext.request.contextPath}/static/images/KeysManager/fillout.png"></div>
			<div class="past_date">钥匙已延期</div>
			
		</div>
	</div> --%>
</div>
<script>
var index; 
$('.list-head ul li').click(function(){
	var idx=$(this).index();
	$('.filtrate').eq(idx).show().siblings('.filtrate').hide();
});

/* 启用 禁用按钮 */
/* $('.big_btn').click(function(){
	var green_bg=$(this).hasClass('green_bg');
	 index=$(this).parents('.listDetail').index();
	if(green_bg){
		openbtn();
	}else if(!green_bg){
		closebtn();
	}
});

$('.big_btn').on('click',function(){
	var green_bg=$(this).hasClass('green_bg');
	 index=$(this).parents('.listDetail').index();
	if(green_bg){
		openbtn();
	}else if(!green_bg){
		closebtn();
	}
}); */


function closebtn(id){
	layer.open({
		title:'温馨提示',
	    content: '您正在执行启用操作，将恢复对方钥匙正常使用哦'
	    ,btn: ['确认', '取消']
	    ,yes: function(){
	    	$('.listDetail').eq(index).find('.big_btn').toggleClass('green_bg');
	    	$('.listDetail').eq(index).find('.little_btn').addClass('rt_site');
	    	$('.listDetail').eq(index).find('.little_btn').removeClass('lf_site');
	    	$('.listDetail').eq(index).find('.btn_txt').text("是否禁用");
			layer.closeAll();
			onOffKey(id,'0');
	    }
	  });
}
function openbtn(id){
	layer.open({
		title:'温馨提示',
	    content: '您正在执行禁用操作，将影响对方钥匙正常使用哦'
	    ,btn: ['确认', '取消']
	    ,yes: function(){
	    	$('.listDetail').eq(index).find('.big_btn').toggleClass('green_bg');
	    	$('.listDetail').eq(index).find('.little_btn').addClass('lf_site');
	    	$('.listDetail').eq(index).find('.little_btn').removeClass('rt_site');
	    	$('.listDetail').eq(index).find('.btn_txt').text("是否启用");
			layer.closeAll();
			onOffKey(id,'1');
	    }
	  });
}


/* 头部筛选 */
$('.refer_all').click(function(){
	$('.mask').slideToggle("fast");
	$('.refer_list_main').slideToggle("fast");
});


$('.postpone').click(function(){
	$('.mask').slideUp("fast");
	$('.refer_list_main').slideUp("fast");
});


$('.list-head ul li').click(function(){
	$(this).find('div').addClass('check_style');
	$(this).siblings().find('div').removeClass('check_style');
	var txt=$('.refer_all').hasClass('check_style');
/* 	if(txt){
		$('.refer_all1').addClass('refer_style');
		$('.refer_all1').siblings().removeClass('refer_style');
	} */
	
	
});
$('.refer_list_main ul li').click(function(){
	$(this).addClass('refer_style');
	$(this).siblings('li').removeClass('refer_style');
	$(this).find('img').show('fast');
    $(this).siblings().find('img').hide('fast');
	$('.mask').slideUp("fast");
	$('.refer_list_main').slideUp("fast");
	var type = $(this).attr("data-type");
	console.log(type);
	loadUserData(type);
	loadProlongData();
});

$('.mask').click(function(){
	$(this).slideUp("fast");
	$('.refer_list_main').slideUp("fast");
});


 function onOffKey(sid,status){
	 $.post("${pageContext.request.contextPath}/admin/tkeys_changeKeys.action", {
	    	'sid':sid,
	    	'status':status
        }, function (result) {
            result = JSON.parse(result);
            return result;
        });
}
function setNodate(){
	var down = $(".dropload-noData").html();
    if(typeof(down)=="undefined"){
		var i= 0;
		var interval = setInterval(setText, 1000);
		function setText() { 
			i++; 
        	down = $(".dropload-noData").html();
			if(down==""){
				$(".dropload-noData").html("暂无数据");
				clearInterval(interval) ;
			}
			if (i > 10 || down=="暂无数据") { 
				clearInterval(interval) ;
			} 
		}
    }
}
 $(function(){
	 loadUserData(1);
	 loadProlongData();
   
});
 
 function loadUserData(type){
	 
		var page = -1;
	    var size = 100;
		var countSize =${countSize};
		var result = '';
		$.ajax({
	        type: 'POST',
	        url: '${pageContext.request.contextPath}/admin/tkeys_pageApp.action?page='+0+'&size='+size+"&type="+type,
	        dataType: 'json',
	        success: function(data){
	            var arrLen = data.length;
	            if(arrLen > 0){
	                for(var i=0; i<arrLen; i++){
	                	result += gethtml(data[i]);
	                }
	                $('#list').html(result);
	            // 如果没有数据
	            }else{
		             // 插入数据到页面，放到最后面
		             $('#list').html($("#templ3").html());
	            }
	            
	             // 插入数据到页面，放到最后面
	             
	             // 每次数据插入，必须重置
	          	 //jiazai();
	             //绑定禁用、启用事件
	             $('.big_btn').click(function(){
	            	 var id = $(this).attr("data-id");
		            	var green_bg=$(this).hasClass('green_bg');
		            	 index=$(this).parents('.listDetail').index();
		            	if(green_bg){
		            		openbtn(id);
		            	}else if(!green_bg){
		            		closebtn(id);
		            	}
		         });
		            
	        },
	        error: function(xhr, type){
	            alert('Ajax error!');
	            // 即使加载出错，也得重置
	            me.resetload();
	        }
	    });
 }
 
 
 function loadProlongData(){
	 
		var page = -1;
	    var size = 100;
		var countSize =${countSize};
		var result = '';
		$.ajax({
	        type: 'POST',
	        url: '${pageContext.request.contextPath}/admin/tkeys_page4Prolong.action?page='+0+'&size='+size,
	        dataType: 'json',
	        success: function(data){
	            var arrLen = data.data.length;
	            if(arrLen > 0){
	                for(var i=0; i<arrLen; i++){
	                	result += gethtml4prolong(data.data[i]);
	                	if(data.data[i].PSTATE=='1'){
	                		$("#little_hot").show();
	                	}
	                }
	                console.log('prolong='+result);
		             // 插入数据到页面，放到最后面
		             $('#list2').html(result);
	            // 如果没有els数据
	            }else{
		             // 插入数据到页面，放到最后面
		             $('#list2').html($("#templ4").html());
	            }
	            
	            
	           
	             // 每次数据插入，必须重置
	          	 //jiazai();
	             
	             //绑定延期事件
	             $('.todata').click(function(){
	            	 var id = $(this).attr("data-id");
		           	 window.location='${pageContext.request.contextPath}/admin/tkeys_sendView4App.action?prolong=1&prolongId='+id;	
		         });
	           
	        },
	        error: function(xhr, type){
	        }
	    });
}

 
var now = new Date(); 

 function gethtml(datai){
	var result = '';
	var tempStrs = datai.VALIDITY.split(".");
  	var year = parseInt(tempStrs[0], 10);
  	var month = parseInt(tempStrs[1], 10) - 1;
  	var day = parseInt(tempStrs[2], 10);
  	var date = new Date(year, month, day, 0, 0, 0);
  	var html=$("#templ1").html();
  	html = html.replace("#TEL#",datai.TEL);
  	html = html.replace("#AUNAME#",datai.AUNAME);
  	html = html.replace("#VALIDITY#",datai.VALIDITY);
  	html = html.replace("#TEL#",datai.TEL);
  	html = html.replace("#SID#",datai.SID);
  	html = html.replace("#LOCK_NAME#",datai.LOCK_NAME);
  	if(datai.STATUS=='0'){
  		html = html.replace("#C1#","green_bg");
  	  	html = html.replace("#C2#","rt_site");
  	  	html = html.replace("#STATE#","禁用");
  	}else{
  		html = html.replace("#STATE#","启用");
  		html = html.replace("#C1#","");
  	  	html = html.replace("#C2#","");
  	}
  	
  	
  	
/*   	if (date<now) {
		result +='<div class="item invalid" >';
  	}else{
		result +='<div class="item validity" >';
  	}

		result +='<div class="right-box">'
		       +'<div class="switch">';
		       if(datai.STATUS == 0){
			       result +='<input class="switch-checkbox" name="'+datai.AUNAME+','+datai.TEL+','+datai.LOCK_NAME+'" type="checkbox" id="'+datai.SID+'" checked disabled>';
			   }else{
			       result +='<input class="switch-checkbox" name="'+datai.AUNAME+','+datai.TEL+','+datai.LOCK_NAME+'" type="checkbox" id="'+datai.SID+'" disabled>';
			   }
		       result +='<label class="switch-label" for="cb_1">'
		                +'<span class="switch-inner" data-on="禁用" data-off="启用"></span>'
		                +'<span class="switch-switch"></span>'
		            +'</label>'
		        +'</div>'
		        +'<div class="data">'
		            +'<img src="${pageContext.request.contextPath}/static/images/KeysManager/time.png" class="time-icon">'
		            +'<span class="details-date">'+datai.VALIDITY+'</span>'
		        +'</div>'
	    	+'</div>'
		    +'<div class="left-box">'
		        +'<p class="name">'+datai.AUNAME+'</p>'
		        +'<p class="tel">'+datai.TEL+'</p>'
		        +'<div class="icon-and-community">'
		            +'<img src="${pageContext.request.contextPath}/static/images/KeysManager/key_select.png" class="key-icon"/>'
		            +'<span class="community">'+datai.LOCK_NAME+'</span>'
		        +'</div>'
		    +'</div>'
		+'</div>'; */
	return html;
} 
 
 
 function gethtml4prolong(datai){
		var result = '';
	  	var html=$("#templ2").html();
	  	html = html.replace("#TEL#",datai.TEL);
	  	html = html.replace("#AUNAME#",datai.AUNAME);
	  	html = html.replace("#CTIME#",datai.TIME_);
	  	html = html.replace("#SID#",datai.SID);
	  	html = html.replace("#LOCK_NAME#",datai.INSTALL_LOCK_NAME);
	  	console.log("datai.PSTATE="+datai.PSTATE)
	  	if(datai.PSTATE=='1'){
	  		html = html.replace("#C1#","");
	  	  	html = html.replace("#C2#","todata");
	  	  	html = html.replace("#CONTENT#","申请钥匙延期");
	  		html = html.replace("#C3#","");
	  	}else 	if(datai.PSTATE=='2'){
	  		html = html.replace("#C1#","displaynone");
	  	  	html = html.replace("#C2#","");
	  	  	html = html.replace("#CONTENT#","钥匙已延期");
	  		html = html.replace("#C3#","past_date");
	  	}else if(datai.PSTATE=='3'){
	  		html = html.replace("#C1#","displaynone");
	  	  	html = html.replace("#C2#","");
	  	  	html = html.replace("#CONTENT#","钥匙未延期");
	  		html = html.replace("#C3#","past_date");
	  	}else{
	  		return  "";
	  	}
		return html;
	} 
</script>

<script id='templ1'>
	<div class="listDetail" style="margin-top: 4px;">
		<div class="invalid">
			<div class="top-box clearfix">
				<div class="lf">#AUNAME#</div>
				<div class="rt">#TEL#</div>
			</div>
			<div class="bottom-box clearfix">
				<div class="lf">#LOCK_NAME#</div>
				<div class="rt">#VALIDITY#</div>
			</div>
		</div>
		<div class="invalbtn">
			<div class="big_btn #C1#" data-id="#SID#">
				<div class="little_btn #C2#"></div>
			</div>
			<div class="btn_txt">是否#STATE#</div>
		</div>
	</div> 
</script>

<script id='templ2'>
	<div class="listDetail">
		<div class="invalid">
			<div class="top-box clearfix">
				<div class="lf">#AUNAME#</div>
				<div class="rt">#TEL#</div>
			</div>
			<div class="bottom-box clearfix">
				<div class="lf">#LOCK_NAME#</div>
				<div class="rt">#CTIME#</div>
			</div>
		</div>
		<div class="inval_apply #C2#" data-id="#SID#">
			<div class="apply_pic #C1#"><img src="${pageContext.request.contextPath}/static/images/KeysManager/fillout.png"></div>
			<div class="#C3#">#CONTENT#</div>
			
		</div>
	</div>
</script>

<script id='templ3'>
		<div class="dropload-noData">
			<img src="${pageContext.request.contextPath}/static/images/KeysManager/no_open_door.png" class="key-icon open_pic"/>
			暂时没有数据哦
		</div>
</script>
<script id='templ4'>
<div class="dropload-noData">
<img src="${pageContext.request.contextPath}/static/images/KeysManager/no_open_door.png" class="key-icon open_pic"/>
暂时没有延期数据哦
</div>
</script>
</body>
</html>